<template>
	<view class="home">
		<!-- 导航 -->
		<u-navbar bgColor="#ffffff" placeholder :title="title" :autoBack="true">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" color="#000000" size="20"></u-icon>
			</view>
		</u-navbar>
		<view class="time-switcher">
			<!-- 自定义样式和文字 -->
			<DateSwitcher prev-text="上月" next-text="本月" :btn-style="{
			    width: '80rpx',
			    backgroundColor: '#4f90cc'
			  }" :text-style="{
			    fontSize: '30rpx',
			    color: '#000000'
			  }" @change="handleDateChange" /> 
		</view>

		<!-- 分段器 -->
		<view class="content">
			<!-- 雨量计信息 -->
			<view class="">
				<!-- 表格 -->
				<view class="table_box">
					<wyb-table ref="table" :headers="headers" :contents="contents" :font-size="fontSize"
						:value-format="valueFormat" border-color="#000000" content-bg-color="#ff8080"
						content-ft-color="#314761" height="1300rpx" :loading="loading" loader-bg-color="rgba(0,0,0,0.1)"
						loader-color="#fff" loader-size="100" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import DateSwitcher from '@/components/DateSwitcher.vue'
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import dayjs from '@/common/dayjs.min.js';
	import yuliangzhan from '@/components/yuLiangZhan.vue';
	export default {
		components: {
			yuliangzhan,
			wybTable,
			DateSwitcher
		},
		data() {
			return {
				loading: false,
				fontSize: [40],
				headers: [{
					label: '日期',
					key: 'date',
					width: 350
				}, {
					label: '自计',
					key: 'ziJi',
					width: 200
				}, {
					label: '人工',
					key: 'renGong',

					width: 200
				}],
				valueFormat: [{
						key: 'date', //日期
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'ziJi', //自计
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'renGong', //人工
						style: {
							color: '#ffffff',
							bgColor: '#ffaa00'
						}
					},
				],
				contents: [],
				id: '',
				title: ''

			}
		},
		onLoad(option) {
			// 默认历史
			this.id = option.id
			this.title = option.name
			console.log('o*******', option);
		},
		onShow() {

		},
		methods: {
			handleDateChange(data) {
				console.log('日期范围:', data)
				this.tabularData(data)
			},
			// 表格数据 雨量站列表
			tabularData(data) {
				uni.$u.http.get('/api/device/device/rainfallStationDailyStatisticsByRsId', {
					params: {
						"beginReportingTime": data.start,
						"endReportingTime": data.end,
						"id": this.id,
					}
				}).then(res => {
					console.log('res////', res);
					let nub = res.data
					this.contents = this.calculateTotal(nub)
				}).catch(err => {
					console.log('错误', err);
					uni.showToast({
						title: '网络错误',
						duration: 1500
					})
				})
			},
			// 简洁版
			calculateTotal(data) {
			    const totalRenGong = data.reduce((sum, item) => sum + item.renGong, 0);
			    const totalZiJi = data.reduce((sum, item) => sum + item.ziJi, 0);
			    
			    const totalItem = {
			        "date": "本月合计",
			        "renGong": Number(totalRenGong.toFixed(1)),  // 【修改】保留小数点后1位
			        "ziJi": Number(totalZiJi.toFixed(1))         // 【修改】保留小数点后1位
			    };
			    
			    data.unshift(totalItem);
			    return data;
			},
			iconFn() {
				uni.navigateBack({
					delta: 1
				});
			},
		},
	}
</script>
<style scoped lang="scss">
	// 时间切换
	.time-switcher {
		display: flex;
		justify-content: center;
		align-items: center;
		// width: 650rpx;
		// background-color: #ff0202;

	}

	.scroll-Y {
		max-height: 1000rpx;
	}

	.home {
		.tab_box {
			// padding: 80rpx 20rpx 10rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.example-body {
				// width: 400rpx;
				padding: 10rpx;
				margin: 0 20rpx;
				color: #ffffff;
				border-radius: 30rpx;
				font-size: 35rpx;
				text-align: center;
				background-color: #314761;
			}
		}

		min-height: 100vh;
		// background-color: #ecf3f7;

		.content {
			.con_bom {
				// color: #ffffff;
				margin: 30rpx;
				padding: 30rpx;
				border-radius: 30rpx;
				background-color: rgba(0, 0, 0, 0.1);

				.text_y {
					font-size: 50rpx;
					text-align: center;
					color: #67fff3;
				}

				.status_box {
					padding: 0 40rpx 40rpx 40rpx;
					border-radius: 20rpx;



					.dev_status {
						font-size: 40rpx;
						padding: 20rpx 0;
						border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
						display: flex;
						align-items: center;
						justify-content: space-between;

					}

					.danwei {
						margin-left: 20rpx;
						font-size: 35rpx;
					}
				}

				.realtime {
					padding: 10rpx;
					background-color: #67fff3;
					font-size: 30rpx;
					color: #000000;
					border-radius: 100rpx;
					margin-top: 20rpx;
					text-align: center;
				}

				.realtimeACT {
					background-color: #4fc5bb;
				}

			}

			// 每日雨量
			.rainfallToday {
				border-radius: 30rpx;
				margin: 30rpx 30rpx 0rpx 30rpx;
				padding: 30rpx 30rpx 80rpx 30rpx;
				background-color: rgba(0, 0, 0, 0.1);

				.rainfallToday_i {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);

					.rainfallToday_a {
						color: #ffffff;
						font-size: 40rpx;
					}

					.rainfallToday_b {
						font-size: 50rpx;
						color: #67fff3;
					}
				}
			}

			.table_box {
				margin-top: 10rpx;
				// background-color: #4fc5bb;
			}

			.hyetal_box {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				color: #ffffff;

				.hyetal_a {
					padding: 20rpx;
					margin: 20rpx;
					border-radius: 20rpx;
					font-size: 40rpx;
					background-color: #6390c3;
				}

				.acvhyetal_a {
					background-color: #8f897e;
					color: #ffffff;
				}
			}
		}
	}
</style>
<style>
	/* 引入字体图标 */
	@import url("/static/fonts/icons/qweather-icons.css");
</style>
<style>
	page {
		background-color: #f2f8ff;
	}
</style>